<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*@keyframes roll{*/
        /*100%{*/
        /*transform:rotateY(360deg) rotateX(360deg);*/
        /*}*/
        /*}*/
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            background: linear-gradient(to bottom, darkslategray, palevioletred);
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            position: relative;
            /*animation:roll 5s infinite linear;*/
        }

        ul {
            width: 100%;
            height: 100%;
            list-style: none;

        }

        li {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid dodgerblue;
            position: absolute;
            opacity: .5;
        }

        .box span {
            display: block;
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background: skyblue;
            opacity: .7;
            border: 1px solid skyblue;
        }

        .box span:nth-child(1) {
            background: blueviolet;
            transform: translateZ(50px);
        }

        .box span:nth-child(2) {
            background: palevioletred;
            transform: rotateY(90deg) translateZ(50px);
        }

        .box span:nth-child(3) {
            background: palegreen;
            transform: rotateY(180deg) translateZ(50px);
        }

        .box span:nth-child(4) {
            background: palegoldenrod;
            transform: rotateY(-90deg) translateZ(50px);
        }

        .box span:nth-child(5) {
            background: greenyellow;
            transform: rotateX(90deg) translateZ(50px);
        }

        .box span:nth-child(6) {

            transform: rotateX(-90deg) translateZ(50px);
        }
    </style>
</head>
<body>
<div class="box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <ul>
        <li></li>
    </ul>
</div>
<script>
    var li = document.querySelector("li");
    var deg = 0;
    var ul = document.querySelector("ul");
    var box = document.querySelector(".box");
    clone();
    var moveX = 0;
    var moveY = 0;
    var timer = null;
    var degX = 0;
    var degY = 0;
    document.body.onmousedown = function (event) {
        var boxX = event.pageX;
        var boxY = event.pageY;
        //实现转动
        document.body.onmousemove = function (event) {
            document.body.style.cursor = "crosshair";
            moveX = event.pageX - boxX;
            moveY = event.pageY - boxY;
            degX += 0.02 * moveX;
            degY += 0.01 * moveY;
            box.style.transform = "rotateX(" + -degY + "deg) rotateY(" + degX + "deg)";
        };
    };
    document.body.onmouseup = function () {
        document.body.onmousemove = null;
        clearInterval(timer);
        timer = setInterval(function () {
            //距离不短缩短
            moveX *= 0.95;
            moveY *= 0.95;
            if (Math.abs(moveX) > 1 || Math.abs(moveY) > 1) {
                //旋转度数一直按照距离的比率增加
                degX += moveX * 0.04;
                degY += moveY * 0.02;
                //体现旋转度数
                box.style.transform = "rotateX(" + -degY + "deg) rotateY(" + degX + "deg)";
            } else {
                clearInterval(timer);
            }
        }, 30);
    };


    function clone() {
        for (var i = 0; i < 36; i++) {
            deg += 10;
            var clone = li.cloneNode(li);
            clone.style.transform = "rotateY(" + deg + "deg)";
            ul.appendChild(clone);
        }
    }
</script>
</body>
</html>